<template>
  <div class="dispatch-detail">
    <div class="main" v-loading="loading">
      <div class="top">
        <el-row type="flex" align="center">
          <el-col :span="6">
            <div style="display: flex">
              <div class="icon">络</div>
              <div>
                <h3>
                  络筒<el-tag
                    size="mini"
                    class="table-tag"
                    style="margin-left: 15px"
                    >{{ search.bc }}</el-tag
                  >
                </h3>
                <div><span class="label">排班编号：</span></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">组织：</span>{{ search.org }}
            </div>
            <div><span class="label">车间：</span>{{ search.cj }}</div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">时间：</span>{{ date }}
            </div>
            <div><span class="label">工种：</span></div></el-col
          >
          <el-col :span="6"
            ><div class="mb10" style="margin-top: 3px">
              <span class="label">班长：</span>{{ basic.monitor }}
            </div>
            <div>
              <span class="label">班教：</span>{{ basic.classCoach }}
            </div></el-col
          >
          <div class="date">
            <h2>{{ day }}</h2>
            <p>{{ month }}</p>
            <el-date-picker
              class="virtual-datepicker"
              v-model="date"
              type="date"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="changeDate"
            >
            </el-date-picker>
          </div>
        </el-row>
      </div>
      <el-row type="flex" justify="space-between" style="margin: 15px 0 10px">
        <div style="font-size: 16px; font-weight: 500; color: #48556a">
          班次人员
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="addPerson"
            >添加人员</el-button
          >
          <el-button class="border-btn" size="small" @click="getYesterday"
            >复制昨日排班</el-button
          >
          <el-button
            v-if="false"
            class="border-btn"
            size="small"
            @click="$emit('copyTemplate', '络筒', date)"
            >复制到模板</el-button
          >
          <el-button
            class="danger-btn"
            type="danger"
            size="small"
            @click="$emit('delAll', '络筒', date)"
            >一键删除</el-button
          >
          <el-button size="small">导出排班表</el-button>
        </div>
      </el-row>
      <div class="common-table">
        <!-- 表头 -->
        <l-table
          type="表头"
          class="fixed-header"
          :search="search"
          :wtOption="wtOption"
          :tableData="[]"
          :showHeader="true"
          :spanMethod="false"
        />
        <div style="width: fit-content; min-width: calc(100% - 8px)">
          <!-- 挡车工 -->
          <l-table
            type="挡车"
            :search="search"
            :date="date"
            :wtOption="wtOption"
            :tableData="table"
            :showHeader="false"
            :areaArr="areaArr"
            :spanMethod="true"
          />
          <!-- 拉细纱工 -->
          <l-table
            type="拉细纱"
            :search="search"
            :date="date"
            :wtOption="wtOption"
            :tableData="laXiShaTable"
            :showHeader="false"
            :spanMethod="false"
            rowStyle
          />
          <!-- 收砣工+放砣工 -->
          <!-- <l-table
          type="收砣"
          :tableData="shouTuoTable"
          :showHeader="false"
          :spanMethod="true"
        ></l-table> -->
          <!-- 打包工 -->
          <!-- <l-table
          type="打包"
          :tableData="daBaoTable"
          :showHeader="false"
          :spanMethod="true"
          :areaArr="areaArr"
        ></l-table> -->
        </div>
      </div>
      <add-dialog
        ref="addDialog"
        :date="date"
        :query="search"
        @getData="getSchedule"
      ></add-dialog>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import addDialog from './add.vue';
import lTable from './tableLt.vue';
import lDialog from './dialog.vue';
import { getSysDict } from '@/api/common.js';
import { getScheduleLt, yesterdaySchedule, getMonitor } from '@/api/dispatch';
export default {
  props: {
    // 搜索条件
    search: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  components: { addDialog, lTable, lDialog },
  data() {
    return {
      basic: {
        monitor: '',
        classCoach: '',
      },
      date: '',
      month: '',
      day: '',
      wtOption: [],
      table: [],
      loadingCount: 0,
      laXiShaTable: [],
      shouTuoTable: [{ ddbh: 1, kqzt: 0 }],
      daBaoTable: [],
      // 合并行
      areaArr: [],
      areaSpan: [],
    };
  },
  computed: {
    loading() {
      return this.loadingCount !== 0;
    },
  },
  created() {
    this.date = moment().format('YYYY-MM-DD');
    this.month = moment(this.date).locale('zh-cn').format('MMMM');
    this.day = moment(this.date).format('DD');
    this.getWorkOption();
    this.mergeTable(this.daBaoTable);
  },
  methods: {
    getSchedule() {
      this.getMonitor();
      // const column = ['挡车工', '拉细纱工'];
      // column.map(item => {
      //   this.getData(item);
      // });
      this.getData();
    },
    async getData(workType) {
      this.loadingCount++;
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        current_gongxu: '络筒',
        time: this.date,
      };
      const res = await getScheduleLt(params);
      if (res.code == 1) {
        // 数据
        let data = res.data;
        this.mergeTable(data);
        this.table = data;
        // if (workType == '挡车工') {
        //   this.mergeTable(data);
        //   this.table = data;
        // } else if (workType == '拉细纱工') {
        //   this.laXiShaTable = data;
        // }
        this.loadingCount--;
      }
    },
    async getMonitor() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '络筒',
        time: this.date,
      };
      const res = await getMonitor(params);
      if (res.code == 1) {
        this.basic = res.data || {};
      }
    },
    async getYesterday() {
      let params = {
        org: this.search.org,
        cj: this.search.cj,
        bc: this.search.bc,
        gongxu: '络筒',
        time: this.date,
      };
      const res = await yesterdaySchedule(params);
      if (res.code == 1) {
        this.getSchedule();
      }
    },
    mergeTable(data) {
      this.areaArr = [];
      this.areaSpan = 0;
      for (let i = 0; i < data.length; i++) {
        if (i == 0) {
          this.areaArr.push(1);
          this.areaSpan = 0;
        } else {
          if (
            data[i].name == data[i - 1].name &&
            data[i].current_work_type == data[i - 1].current_work_type
          ) {
            this.areaArr[this.areaSpan] += 1;
            this.areaArr.push(0);
          } else {
            this.areaArr.push(1);
            this.areaSpan = i;
          }
        }
      }
    },
    async getWorkOption() {
      let workType = 'workType_lt';
      const res = await getSysDict(workType);
      if (res.code == 1) {
        this.wtOption = res.data.dataList;
      }
    },
    addPerson() {
      this.$refs.addDialog.show();
    },
    changeDate(val) {
      this.month = moment(val).locale('zh-cn').format('MMMM');
      this.day = moment(val).format('DD');
      this.getSchedule();
    },
  },
};
</script>

<style lang="scss" scoped>
.common-table {
  overflow: auto;
  border-right: 1px solid #ebeef5;
}
</style>

<style></style>
